<template>
    <div>
        <div class="title-wrapper">
            <div class="title">
                <Button class="down" type="primary" @click="exportDate">导出excel</Button>
                <DatePicker type="date"
                            :value="day"
                            @on-change='handleChange'
                            placeholder="Select date"
                            style="width: 200px;margin-right: 5px">
                </DatePicker>
            </div>
        </div>
        <div>
            <Table border :columns="columns" :data="tableData" class="table-wrapper" ref="table"></Table>
        </div>
    </div>
</template>

<script>
    import {getStatisticsByDay} from "../request/api"
    import {today} from "../request/utils"

    export default {
        name: "Statistics",
        data() {
            return {
                day: today,
                columns: [],
                tableData: []
            }
        },
        created() {
            this.getTable();
        },
        methods: {
            exportDate() {
                this.$refs.table.exportCsv({
                    filename: this.day
                });
            },
            getTable() {
                getStatisticsByDay(this.day).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.columns = res.data.columns;
                        this.columns.forEach(item => {
                                if (item.key == "time" || item.key == "teacher")
                                    item.sortable = true;
                            }
                        )
                        this.tableData = res.data.tableData;
                    }
                })
            },
            handleChange(day) {
                this.day = day;
                this.getTable();
            }
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        align-items: center;
        height: 46px;
        flex-direction: row-reverse;
    }

    .down {
        margin-right: 20px;
    }
</style>
